using([
    'utils/helpers',
    'components/Follow/Follow',
    'pc/js/mod/home/vue-home-index',
    'pc/js/mod/home/vue-home-posts',
    'pc/js/mod/home/vue-home-fans-layout',
    'pc/js/mod/home/vue-home-fans-fans',
    'components/BannerImage/Pc'
], (helpers, Follow, HomeIndex, HomePosts, FansLayout, Fans, PcBanner) => {

Vue.prototype.helpers = helpers;
const globalStrUid = window.globalStrUid;

const router = new VueRouter({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: HomeIndex,
            props: {strUid: globalStrUid}
        },
        {
            path: '/posts',
            component: HomePosts,
            props: {strUid: globalStrUid}
        },
        {
            path: '/fans',
            component: FansLayout,
            children: [
                {
                    path: 'fans',
                    component: Fans,
                    props: {type: 'fans', strUid: globalStrUid}
                },
                {
                    path: 'follows',
                    component: Fans,
                    props: {type: 'follows', strUid: globalStrUid}
                }
            ]
        }
    ]
});

new Vue({
    router: router,
    data: function() {
        return {
            strUid: globalStrUid,
            banner: globalBanner,
            userInfo: globalUserInfo,
            fans: globalFans,
            follows: globalFollows
        };
    },
    methods: {
        initFollowBtn: function() {
            // follow btn
            let followBtn = new Follow(this.strUid);
            followBtn.render(document.getElementById('followarea'));
        },
        initBannerUpload: function() {
            if(USER_SDK.getInstance().isLogin() && this.strUid === USER_SDK.getInstance().getStrUid()) {
                let bannerTarget = document.querySelector('.home-banner');
                let oldBannerImage = bannerTarget.style.backgroundImage;

                let changeBtn = document.querySelector('.home-banner-btn');
                changeBtn.style.display = 'inline-block';

                changeBtn.onclick = () => {
                    let pcBanner = new PcBanner();
                    pcBanner.onChange = (obj) => {
                        if(null === obj) {
                            bannerTarget.style.backgroundImage = oldBannerImage;
                        } else {
                            bannerTarget.style.backgroundImage = 'url('+ obj.getPreview() +')';
                        }
                    };
                    pcBanner.onSuccess = (data) => {
                        var ret = data.banner + '?t=' + Math.random();
                        bannerTarget.style.backgroundImage = 'url(' + ret + ')';
                    };
                    pcBanner.render(document.querySelector('.home-upload-banner'));
                };
            }
        }
    },
    mounted: function() {
        this.initFollowBtn();
        this.initBannerUpload();
    },
    template:
`<div data-role="app">
    <div class="home-banner" :style="'margin-top: 46px;' + (banner ? 'background-image:url('+ banner +');' : '')">
        <div class="x-wrapper home-banner-top">
            <span class="x-btn home-banner-btn">更换封面图</span>
            <div class="home-banner-top-name">
                <strong>{{ userInfo.user_name }}</strong>
                <span :class="userInfo.gender === '1' ? 'x-icon-male' : 'x-icon-female'" style="vertical-align: text-bottom"></span>
            </div>
            <div class="home-banner-top-intro">{{ userInfo.short_intro }}</div>
            <div class="home-banner-top-widget" id="followarea"></div>
        </div>
        <div class="home-banner-bottom">
            <div class="x-wrapper home-banner-bottom-wrapper">
                <div class="home-banner-avatar"><img width="150" height="150" :src="helpers.getAvatar(userInfo.avatar)" /></div>
                <div class="home-banner-navs">
                    <router-link class="home-banner-navs-item" to="/">主页</router-link>
                    <router-link class="home-banner-navs-item" to="/posts">文章</router-link>
                </div>
                <div class="home-banner-follow">
                    <router-link class="home-banner-follow-item" to="/fans/fans"><p>{{ fans }}</p><span>粉丝</span></router-link>
                    <router-link class="home-banner-follow-item" to="/fans/follows"><p>{{ follows }}</p><span>关注</span></router-link>
                </div>
            </div>
        </div>
    </div>
    <div class="x-wrapper home-content-wrapper">
        <router-view></router-view>
    </div>
    <div class="home-upload-banner"></div>
</div>`
}).$mount('#app');

});
